<template>
    <div class="articles">
        <div class="header">
            <breadcrumb></breadcrumb>
        </div>
        <div class="main">
            <div class="main_hd">
                <el-form ref="form" :model="form" label-width="80px">
                    <div class="form_container">
                        <div class="form_item">
                            <span>博文标题:</span>
                            <el-input v-model="form.article_title" style="width: 280px;"
                                      placeholder="请输入博文标题"></el-input>
                        </div>
                        <div class="form_item">
                            <el-button type="primary" @click="searchArticles">查询</el-button>
                        </div>
                        <el-button type="primary"><router-link :to="{path:'/dashboard/articles/add'}" tag="span">博文新增</router-link></el-button>
                    </div>
                </el-form>
            </div>
            <div class="main_list">
                <div class="table_container">
                    <el-table
                            style="width: 100%;"
                            :data="articlesList"
                            :header-cell-style="{background:'#f5f5f8',color:'#909399'}">
                        <el-table-column :show-overflow-tooltip='true' prop="article_title" label="标题" min-width="1">
                        </el-table-column>
                        <el-table-column prop="article_date" label="发表时间" min-width="1" :align="'center'">
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip='true' prop="user.user_name" label="作者"
                                         min-width="1" :align="'center'">
                        </el-table-column>
                        <el-table-column prop="article_views" label="浏览量" min-width="1" :align="'center'">
                        </el-table-column>
                        <el-table-column label="操作" min-width="1" :align="'center'">
                            <template slot-scope="scope">
                                <router-link :to="{path:'/dashboard/articles/edit/'+scope.row.article_id}" tag="a" style="color:#409eff;">修改</router-link>
                                &#32;
                                <a @click="articleDel(scope.row.article_id)" href="javascript:void(0)" style="color:#409eff;">删除</a>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="main_more">
                        <el-pagination
                                class="page"
                                @current-change="pageChange()"
                                :current-page.sync="curPage"
                                layout="prev, pager, next"
                                :page-size="pageSize"
                                :total="count">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {deleteArticle, getArticleByTitle, getArticleList} from "@/api/article";
    import Breadcrumb from '@/components/currency/breadcrumb';
    export default {
        name: "articles",
        components: { Breadcrumb },
        data() {
            return {
                count:0,
                curPage:1,
                pageSize:10,
                pageStatus:0,
                title:'',
                articlesList: [{

                }],
                form: {
                    article_title: '',
                },
            };
        },
        methods: {
            async init() {
                if (this.pageStatus === 1) {
                    this.pageStatus = 0;
                    this.curPage = 1;
                }
                var list = await getArticleList(this.curPage,this.pageSize);
                this.articlesList = list.data;
                this.count = list.total;
            },
            async pageChange() {
                if (this.pageStatus === 0) {
                    var list = await getArticleList(this.curPage, this.pageSize);
                    this.articlesList = list.data;
                    this.count = list.total;
                } else if (this.pageStatus === 1) {
                    var list2 = await getArticleByTitle(this.title, this.curPage, this.pageSize);
                    this.articlesList = list2.data;
                    this.count = list2.total;
                }

            },
            async searchArticles() {
                this.title = this.form.article_title;
                if (this.form.article_title != null && this.form.article_title !== '') {
                    if (this.pageStatus === 0) {
                        this.pageStatus = 1;
                        this.curPage = 1;
                    }
                    var list = await getArticleByTitle(this.title,this.curPage,this.pageSize);
                    this.articlesList = list.data;
                    this.count = list.total;
                }else {
                    this.init();
                }
            },
            articleDel(id){
                this.$confirm('此操作将永久删除该博文, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteArticle(id).then(value => {
                        if (value.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            this.init();
                        }else {
                            this.$message({
                                type: 'error',
                                message: value.msg
                            });
                        }
                    });
                })
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style scoped>
    .header{
        margin: 34px 0 20px 0 ;
        padding-left: 20px;
        padding-top: 20px;
        border: 1px solid #ddd;
        background-color: #fff;
        font-weight: 400;
    }
    .title{
        font: normal 500 20px/56px '微软雅黑';
    }
    .main{
        padding: 18px 30px;
        border: 1px solid #ddd;
        background-color: #fff;
    }
    .main_hd{
        text-align: right;
        min-width: 900px;
        font-size: 14px;
    }

    .form_container{
        padding: 0 0 20px 0;
        display: flex;
        align-items: center;
    }
    .form_item{
        font:inherit;
        margin-right: 20px;
    }
    .form_item span{
        font:inherit;
        margin-right: 5px;
    }
    .main_list{
        width: 100%;
        display: flex;
        justify-content: center;
        overflow: hidden;
        min-width: 900px;
    }
    .table_container{
        width: 95%;
        padding: 20px;
        border: 1px solid #f5f5f8;
    }
    .el-table{
        flex: 1;
    }
    .el-table .bgc_cover{
        background-color: #f5f5f8;
    }
    .el-table>thead>tr>th{
        background-color: #f5f5f5;
    }
    .main_more{
        text-align: center;
        font: normal 400 16px '微软雅黑';
        color: grey;
        display: flex;/*设置为弹性容器*/
        align-items: center; /*定义div1的元素垂直居中*/
        justify-content: center; /*定义div1的里的元素水平居中*/
        height: 80px;
    }
</style>
